<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../resources/css/intstyle.css" rel="stylesheet" type="text/css" />
<link href="../resources/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../resources/css/ichecker/square/blue.css" rel="stylesheet" type="text/css">
<link href="../resources/css/timepicker/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css">
<link href="../resources/css/combobox.css" rel="stylesheet" type="text/css">
<link href="../resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	margin-bottom: 0px;
}

.button-group-div div{
	float:left;
	margin-right:5px;
}
.button-group-div{
	height:35px;
}
.ui-resizable-se {
		bottom: 17px;
}
</style>
<script type="text/javascript" src="../resources/scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../resources/scripts/jquery-ui.custom.js"></script>
<script type="text/javascript" src="../resources/scripts/jquery.icheck.js"></script>
<script src="../resources/scripts/timepicker/jquery-ui-timepicker-addon.js"></script>
<script src="../resources/scripts/timepicker/i18n/jquery-ui-timepicker-ja.js"></script>
<script src="../resources/scripts/i18n/jquery.ui.datepicker-ja.js"></script>
<script src="../resources/scripts/combobox.js"></script>
<script type="text/javascript" src="../resources/scripts/jquery.dataTables.js"></script>


<!-- <script>
	$(function() {
		$( "#radio" ).buttonset();
		$( "#hobby" ).buttonset();
	});
</script> -->

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
	increaseArea: '20%'
  });
});

$(function() {
	$('#tradedate').datetimepicker();
});
	
$(function() {
		$( "#combobox" ).combobox();
});

$(function() {
		$( "#resizable" ).resizable({
			handles: "se"
		});
});
$(function() {
    $( "input[type=submit],button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
});

$(document).ready(function() {

				$('#example').dataTable();
} );
</script>
	
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* 此 1px 负边距可以放置在此布局中的任何列中，且具有相同的校正效果。 */
ul.nav a { zoom: 1; }  /* 缩放属性将为 IE 提供其需要的 hasLayout 触发器，用于校正链接之间的额外空白 */
</style>
<![endif]-->	
</head>

<body>

<div class="container">
  <div class="header">
  <div class="headfunc">
  
  <a href="#">退出</a>&nbsp;&nbsp;<a href="#">进入首页</a>&nbsp;&nbsp; <a href="#">站内消息</a>&nbsp;&nbsp; <a href="#">帐户设置</a>
  </div>
  <div style="position: absolute; left: 0; top: 0; font-size: 36px; color: #F60; font-family: '华文琥珀';">我的平台</div>
<div id="head-nav" style="position:absolute; right:0; bottom:0;">
  <ul class="nav">
      <li><a href="#">网站设置</a></li>
      <li><a href="#">会员管理</a></li>
      <li><a href="#">商品管理</a></li>
      <li><a href="#">订单管理</a></li>
      <li><a href="#">新闻管理</a></li>
      <li><a href="#">日志管理</a></li>
      <li><a href="#">供求管理</a></li>
      <li><a href="#">评论管理</a></li>
      <li><a href="#">消息管理</a></li>
      <li><a href="#">营销管理</a></li>
      <li><a href="#">客服管理</a></li>
      <li><a href="#">财务管理</a></li>
    </ul>  
</div>
  <!-- end .header --></div>
  <div class="sidebar1">
	<ul class="sidenav">
      <li class="titlebar">外部用户管理</li>
      <li><a href="#">买家权限设置</a></li>
      <li><a href="#">卖家权限设置</a></li>
      <li><a href="#">注册用户列表</a></li>
      <li><a href="#">查看用户订单</a></li>
      <li><a href="#">查看用户商品</a></li>
      <li><a href="#">用户积分设置</a></li>
      <li class="titlebar">平台用户管理</li>
      <li><a href="#">平台用户列表</a></li>
      <li><a href="#">添加平台用户</a></li>
      <li><a href="#">用户权限设置</a><!-- end .sidebar1 --></li>
	</ul>
  </div>
<div class="content">
  <div class="subnav">
  <a href="#">网站设置</a>&gt;&gt;<a href="#">外部用户管理</a>&gt;&gt;查看用户列表</div>
  <div class="ui-state-error ui-corner-all" style="margin:15px;">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
  <strong style="color:#cd0a0a;">Alert:</strong> </p>
  <p style="color:#cd0a0a;">Sample ui-state-error style.</p>
  <p style="color:#cd0a0a;">Sample ui-state-error style.</p>
  </div>
<div class="box">
  
  <h1>说明</h1>
    <p>请注意，这些布局的 CSS 带有大量注释。如果您的大部分工作都在设计视图中进行，请快速浏览一下代码，获取有关如何使用液态布局 CSS 的提示。您可以先删除这些注释，然后启动您的站点。要了解有关这些 CSS 布局中使用的方法的更多信息，请阅读 Adobe 开发人员中心上的以下文章：<a href=http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>。</p>
    <div class="box">
    <form id="form1" name="form1" method="post" action="">

	<fieldset>
    <div>
    	<div class="formLabel">
        	<label for="name">姓名</label>
	    </div>
        <div>
        	<input name="name" type="text" class="text ui-widget-content ui-corner-all" id="name" />
	    </div>
    </div>
    
    <div>
    	<div class="formLabel">
        	<label for="email">邮箱</label>
	    </div>
        <div>
        	<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
	    </div>
    </div>
    
    <div>
    	<div class="formLabel">
        	<label for="password">密码</label>
	    </div>
        <div>
        	<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	    </div>
    </div>
    
	<div class="button-group-div">	
		<div class="formLabel"><label>性别</label></div>
        <div style="margin-left:50px;">
        <div><input type="radio" id="radio1" name="radio"/></div>
			  <div><label for="radio1">男</label></div>		  
			  <div><input type="radio" id="radio2" name="radio" checked="checked"/></div>
			  <div><label for="radio2">女</label></div>
        </div>
			  
	</div>
		  
		  <div class="button-group-div">
			  <div class="formLabel"><label>爱好</label></div>
              <div style="margin-left:50px;">
              <div><input type="checkbox" id="check1"/></div>
			  <div><label for="check1">打球</label></div>
			  <div><input type="checkbox" id="check2"/></div>
			  <div><label for="check2">看书</label></div>
			  <div><input type="checkbox" id="check3"/></div>
			  <div><label for="check3">游戏</label></div>
              </div>
			  			  
		  </div>
		  
	<div>
    	<div class="formLabel">
        	<label for="tradedate">时间</label>
	    </div>
        <div>
        	<input type="text" name="tradedate" id="tradedate" class="text ui-widget-content ui-corner-all" readonly/>
	    </div>
    </div>
    
    <div>
    	<div class="formLabel">
        	<label>城市</label>	
	    </div>
        <div style="margin-bottom:10px;">
        	<select id="combobox">
				<option value="">Select one...</option>
				<option value="ActionScript">ActionScript</option>
				<option value="AppleScript">AppleScript</option>
				<option value="Asp">Asp</option>
				<option value="BASIC">BASIC</option>
				<option value="C">C</option>
				<option value="C++">C++</option>
				<option value="Clojure">Clojure</option>
				<option value="COBOL">COBOL</option>
				<option value="ColdFusion">ColdFusion</option>
				<option value="Erlang">Erlang</option>
				<option value="Fortran">Fortran</option>
				<option value="Groovy">Groovy</option>
				<option value="Haskell">Haskell</option>
				<option value="Java">Java</option>
			</select>
	    </div>
    </div>
		  
	<div>
    	<div class="formLabel">
        	<label for="Name">标题</label>
	    </div>
        <div>
        	<input type="text" id="" class="text ui-widget-content ui-corner-all"/>
	    </div>
    </div>

	<div>
    	<div class="formLabel">
        	<label for="content" style="vertical-align:top;">内容</label>
	    </div>
        <div>
        	<textarea id="resizable" rows="10" cols="48" class="text ui-widget-content ui-corner-all"></textarea>
	    </div>
    </div>

    <div style="margin-left:125px;">
        	<input type="submit" value="提交"/>
            <button>重置</button>
	</div>


		
		
	</fieldset>
    </form>
    </div>
    <div class="box">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd gradeX">
			<td>Trident</td>
			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center"> 4</td>
			<td class="center">X</td>
		</tr>
		<tr class="even gradeC">
			<td>Trident</td>
			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>
			<td class="center">C</td>
		</tr>
		<tr class="odd gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>
			<td class="center">A</td>
		</tr>
		<tr class="even gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 6</td>
			<td>Win 98+</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr class="odd gradeA">
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
			<td class="center">7</td>
			<td class="center">A</td>
		</tr>
		<tr class="even gradeA">
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 1.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 1.5</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 2.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 3.0</td>
			<td>Win 2k+ / OSX.3+</td>
			<td class="center">1.9</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Camino 1.0</td>
			<td>OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Camino 1.5</td>
			<td>OSX.3+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Netscape 7.2</td>
			<td>Win 95+ / Mac OS 8.6-9.2</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Netscape Browser 8</td>
			<td>Win 98SE+</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Netscape Navigator 9</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
</table>
    </div>
</div>
    <div class="box">
    <h2>清除方法</h2>
    <p>由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 &lt;br class="clearfloat" /&gt; or &lt;div class="clearfloat"&gt;&lt;/div&gt;。这具有相同的清除效果。</p>
	
    </div>
    <div class="box">
    <h3>徽标替换</h3>
    <p>此布局的 .header 中使用了图像占位符，您可能希望在其中放置徽标。建议您删除此占位符，并将其替换为您自己的链接徽标。 </p>
    <p> 请注意，如果您使用属性检查器导航到使用 SRC 字段的徽标图像（而不是删除并替换占位符），则应删除内嵌背景和显示属性。这些内嵌样式仅用于在浏览器中出于演示目的而显示徽标占位符。 </p>
    <p>要删除内嵌样式，请确保将 CSS 样式面板设置为“当前”。选择图像，然后在“CSS 样式”面板的“属性”窗格中右键单击并删除显示和背景属性。（当然，您始终可以直接访问代码，并在其中删除图像或占位符的内嵌样式。）</p>
    <h4>Internet Explorer 条件注释</h4>
    <p>这些液态布局包含 Internet Explorer 条件注释 (IECC)，用于更正两个问题。 </p>
    <ol>
      <li>在基于百分比的布局中，浏览器在舍入 div 大小方面不一致。如果浏览器必须呈现诸如 144.5px 或 564.5px 之类的数字，则必须将这些数字舍入到最接近的整数。Safari 和 Opera 向下舍入，Internet Explorer 向上舍入，而 Firefox 向上舍入一列，然后再向下舍入一列，以便完全填充容器。这些舍入问题可能导致某些布局出现不一致。此 IECC 提供了用于修复 IE 的 1px 负边距。您可以将其移至任何列（以及左侧或右侧），以满足您的布局需求。</li>
      <li>由于在某些情况下 IE6 和 IE7 中会呈现额外的空白，因此已向导航列表中的锚记添加缩放属性。缩放将为 IE 提供其专用的 hasLayout 属性来修复此问题。</li>
    </ol>
    </div>
    <div class="box">
    <h4>背景</h4>
    <p>本质上，任何 div 中的背景颜色将仅显示与内容一样的长度。这意味着，如果要使用背景颜色或边框创建侧面列的外观，将不会一直扩展到脚注，而是在内容结束时停止。如果 .content div 将始终包含更多内容，则可以在 .content div 中放置一个边框将其与列分开。</p>
    </div>
    <!-- end .content --></div>
  <div class="footer">
    <p>此 .footer 包含 position:relative 声明，以便为 .footer 指定 Internet Explorer 6 hasLayout，并使其以正确方式清除。如果您不需要支持 IE6，则可以将其删除。</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
<script>
	$(function() {
		$( "#radio" ).buttonset();
	});
</script>